<template>
	<div class="filter-bar" @keyup.enter="onEnterClick">
		<div class="filter-bar__row">
			<el-form size="mini" inline label-width="80px">
				<slot name="row-1"></slot>
				<template v-if="filterExtend" >
					<slot name="row-2"></slot>
				</template>
			</el-form>
		</div>
		<div class="btn-tools">
			<div v-show="$slots['row-2']" class="form-item filter-btn-tools">
				<w-icon
					v-show="$slots['row-2']"
					:type="filterExtend?'filter-unextend':'filter-extend'"
					class="filter-btn-tools__extend fx-cursor"
					@click="onFilterExtendClick"
				></w-icon>
			</div>
			<slot name="tools"></slot>
		</div>
	</div>
</template>
<script>
export default {
	name: 'filterBar',
	data () {
		return {
			filterExtend: false
		}
	},
	methods: {
		onFilterExtendClick () {
			this.filterExtend = !this.filterExtend
		},
		onEnterClick () {
			if (event.target.tagName === 'INPUT') {
				this.$emit('on-enter')
			}
		}
	}
}
</script>
<style lang="stylus" scoped>
@import '~$assets/stylus/varsty.styl'
.filter-bar {
	display:flex
	flex-direction: row
	padding-left: 11px
	margin-top: 5px
	&__row {
		flex: 1
		display:flex
		align-items: center
		// height: 40px
		>>>.el-form-item {
			// margin-bottom: 0
			.el-form-item__label {
				// text-align: left;
			}
		}
	}
	.btn-tools {
		height: 32px
		display: flex;
		margin-right: 26px
	}
	.filter-btn-tools {
		display: flex;
		align-items: center;
		&__extend {
			width: 14px
			height: 14px
			margin-right: 20px
			margin-left:10px
		}
	}
}
</style>
